<!--
    简单的临时表格方案，需传入model与data数据
    只负责数据显示 
--> 
<template>
    <div class="table-wrapper">
        <Spin size="large" fix v-show="loading"></Spin>
        <table class="table" :class="tableClass">
            <thead>
                <slot name="thead">
                    <tr>
                        <th class="check-cell" @click="checkAllRow($event)" v-if="hasCheck">
                            <Checkbox v-model="checkAll"></Checkbox>
                        </th>
                        <th v-for="col in orderFields" :key="col.code" v-if="col.listpos!==false">
                            {{col.name}}
                        </th>
                        <th v-if="tableModel.actions && tableModel.actions.length">
                        </th>
                    </tr>
                </slot>
            </thead>
            <tbody>
                <slot name="tbody">
                    <tr v-if="!tableData || !tableData.length">
                        <td colspan="999" class="text-nodata">
                            暂无数据
                        </td>
                    </tr>
                    <tr v-else v-for="(row,index) in tableData" :key="row.id" :class="{[ativeClass]:checkList[index]}" @click="checkTableRow(index)">
                        <td class="check-cell" v-if="hasCheck" @click="checkRow($event,index)">
                            <Checkbox v-model="checkList[index]"></Checkbox>
                        </td>
                        <td v-for="col in orderFields" :key="col.code" v-if="col.listpos!==false">
                            <div v-if="!extRender[col.code]" class="field" :class="fieldClass(row[col.code],col.code)" v-html="renderData(row[col.code],col.code,row)"></div>
                            <component v-else-if="extRender[col.code].component" :is="extRender[col.code].component" :data="row[col.code]" :row="row" :option="extRender[col.code]" :index="index" :model="col"></component>
                        </td>
                        <td v-if="tableModel.actions && tableModel.actions.length">
                            <div class="text-right">
                                <InlineAction v-show="inlineActionStatus[action.code].show" v-for="action in inlineActions" :index="index" :model="action" :key="action.code" :row="row"></InlineAction>
                            </div>
                        </td>
                    </tr>

                </slot>
            </tbody>
            <tfoot v-if="false">
                <slot name="tfoot">
                    <th></th>
                </slot>
            </tfoot>
        </table>
    </div>
</template>

<script>
import $ from '@/common'
import Field from 'field/type'
import InlineAction from 'action/inlineAction'
export default {
    name: 'gridTable',
    props: {
        hasCheck: {
            default: true
        },
        hasAction: {
            default: false
        },
        loading: {
            default: false
        },
        model: {},
        //点击可选中行
        rowCheckMode: {
            default: false
        },
        //选中行的类名
        ativeClass: {
            default: 'active'
        },
        data: {
            default: () => []
        },
        size: {
            default: null
        },
        //表单默认值，主要为子表服务
        defaultData: {}
    },
    data() {
        return {
            checkAll: false,
            tableModel: {},
            tableData: [],
            checkList: [],
            fieldList: [],
            extRender: {},
            //行内状态数据吗，用于从外部强制控制inlineAction的状态
            //临时方案，待改进
            inlineActionStatus: {}
        }
    },
    watch: {
        data: {
            immediate: true,
            handler() {
                this.$set(this, 'tableData', this.data)
                this.$set(this, 'checkList', [])
            }
        },
        checkList() {
            this.$emit('checkChange')
        },
        tableModel() {
            this.dataRender = {}
            this.fieldList = $.propMap(this.tableModel.fields, 'code')
            for (let i in this.tableModel.fields) {
                let field = this.tableModel.fields[i]
                if (Field[field.type] && Field[field.type].render) {
                    this.dataRender[field.code] = Field[field.type].render(field)
                }
                if (field.tpl) {
                    this.dataRender[field.code] = (code, row) => {
                        return $.composeValue(field.tpl, row)
                    }
                }
            }
        }
    },
    computed: {
        inlineActions() {
            for (let i in this.tableModel.actions) {
                this.inlineActionStatus[this.tableModel.actions[i].code] = {
                    show: true,
                    enable: true
                }
            }
            return this.tableModel.actions
        },
        orderFields() {
            return this.tableModel.fields.filter((v) => {
                return v.listpos !== 0 && v.scope !== 'param'
            }).sort((a, b) => {
                return a.listpos - b.listpos
            })
        },
        tableClass() {
            var classSet = {}
            if (this.size) {
                classSet[`table-${this.size}`] = true
            }
            return classSet
        }
    },
    created() {
        if (this.model) {
            this.$set(this, 'tableModel', this.model)
        } else {
            if (this.data && this.data.length) {
                var tempModel = { fields: [] }
                for (let i in this.data[0]) {
                    tempModel.fields.push({
                        code: i,
                        name: i
                    })
                }
                this.$set(this, 'tableModel', tempModel)
                this.$set(this, 'tableData', this.data)
            }
        }
    },
    methods: {
        //清空方法
        clear: function() {
            this.checkAll = false;
            this.$set(this, 'checkList', [])
            this.$set(this, 'tableData', [])
        },
        renderData: function(value, code, row) {
            if (this.dataRender && this.dataRender[code]) {
                return this.dataRender[code](value, row)
            } else {
                return value
            }
        },
        fieldClass(value, code) {
            var res = {}
            if (this.fieldList[code] && this.fieldList[code].render && this.fieldList[code].render.class_name) {
                if (this.fieldList[code].render.class_name[value]) {
                    res[this.fieldList[code].render.class_name[value]] = true
                }
            }
            return res
        },
        //临时处理，待完善
        actionTrigger(data) {
            if (this.$parent.actionTrigger) {
                return this.$parent.actionTrigger(data)
            } else {
                return this.$emit('actionTrigger', data)
            }
        },
        checkTableRow(i) {
            if (this.rowCheckMode) {
                this.$set(this.checkList, i, !this.checkList[i])
            }
            this.$emit('rowCheck', {
                value: this.checkList[i],
                index: i,
                id: this.data[i].id
            })
        },
        //点击单元格选中行
        checkRow(e, i) {
            //判断点击元素，阻止点击checkbox时重复触发改变
            if (e.target === e.currentTarget) {
                this.$set(this.checkList, i, !this.checkList[i])
            }
            if (this.checkList[i] && this.checkAll) {
                this.checkAll = false
            }
            this.$emit('rowCheck', {
                value: this.checkList[i],
                index: i,
                id: this.data[i].id
            })
        },
        //行全选
        checkAllRow(e) {
            var val = !this.checkAll;
            if (e.target === e.currentTarget) {
                this.checkAll = !this.checkAll
            } else {

            }
            var list = [];
            for (var i = 0; i < this.tableData.length; i++) {
                list[i] = val
            }
            this.$set(this, 'checkList', list)
        },
        getSelectedDataRow() {
            for (var i in this.checkList) {
                if (this.checkList[i]) {
                    return this.tableData[i];
                }
            }
        },
        importTableComponents(data) {
            $.setProp(this.$options.components, data)
        },
        addExtRender(data = {}) {
            this.$set(this, 'extRender', $.setObj(data, this.extRender))
        },
        setInlineActionStatus(command) {
            this.$set(this.inlineActionStatus, command.code, $.setObj(command, this.inlineActionStatus, [command.code]))
        }
    },
    components: {
        InlineAction
    }
}
</script>

<style lang="less">
.text-right {
    text-align: right;
}

.table-wrapper {
    clear: both;
    /*position: relative;*/
    overflow-y: auto;
    .ivu-spin {
        display: flex;
        background: rgba(255, 255, 255, 0.6);
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .ivu-spin-main {
            width: auto;
            height: auto;
        }
    }
}

.text-success {
    color: #2d8cf0;
}

.text-gray {
    color: #999;
}

.data-time {
    min-width: 65px;
    text-align: center;
}

.table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
    border: 1px solid #dddee1;
    thead>tr>th.check-cell,
    tbody>tr>td.check-cell {
        width: 32px;
        /*padding-left: 10px;*/
        padding-right: 0px;
        cursor: pointer;
    }
    thead {
        th {
            height: 40px;
            white-space: nowrap;
            overflow: hidden;
            background-color: #f8f8f9;
            min-width: 0;
            box-sizing: border-box;
            text-align: left;
            text-overflow: ellipsis;
            vertical-align: middle;
            border-bottom: 1px solid #e9eaec;
            vertical-align: middle;
            padding: 0 8px;
            &:last-child {
                border-right: 1px solid #e9eaec;
            }
        }
    }
    tbody {
        tr {
            &:nth-child(2n) td {
                background-color: #fdfdfd;
            }
            td {
                background-color: #fff;
                transition: background-color .2s ease-in-out;
                min-width: 0;
                height: auto;
                box-sizing: border-box;
                text-align: left;
                text-overflow: ellipsis;
                vertical-align: middle;
                border-bottom: 1px solid #e9eaec;
                vertical-align: middle;
                padding: 8px 8px;
                max-width: 400px;
                word-wrap: break-word;
                word-break: normal;
            }
            &:last-child td {
                border-bottom: none
            }
        }
    }
}
</style>
